<template>
  <section class="new-list">
    <el-collapse v-model="active">
      <el-collapse-item
        :title="item.content.news_item[0].title"
        :name="index"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="new-list-item">
          <div
            class="new-list-item-content"
            v-for="(ftem, fndex) in item.content.news_item"
            :key="fndex"
          >
            <div class="new-list-item-img">
              <img :src="ftem.thumb_url" alt="" @click="goUrl(ftem.url)" />
              <!-- 添加特效元素 -->
              <div class="image-effect"></div>
            </div>
            <div class="new-list-item-content-child">
              <h3 class="new-list-item-title" @click="goUrl(ftem.url)">
                {{ ftem.title }}:
              </h3>
              <div class="new-list-item-content-ftem">
                <section v-html="ftem.content" />
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </section>
</template>

<script>
</script>

<style lang="less" scoped>
.new-list {
  padding: 0 10px;
  .new-list-item {
    padding: 10px;
    box-sizing: border-box;
    .new-list-item-content {
      display: flex;
      .new-list-item-img {
        width: 100%;
        height: auto;
        max-width: 400px;
        position: relative; /* 添加定位以便特效元素可以绝对定位 */
        img {
          width: 100%;
          height: auto;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
        // 添加特效样式
        .image-effect {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 10px;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
          animation: fadeInOut 2s infinite;
        }
      }
      .new-list-item-content-child {
        margin-left: 10px;
        flex-grow: 1;
        .new-list-item-title {
          font-size: 20px;
          text-align: left;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
        .new-list-item-content-ftem {
          float: left;
          section {
            text-align: left;
            font-size: 12px;
          }
        }
      }
    }
  }
}

// 添加动画关键帧
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

// 媒体查询
@media (max-width: 768px) {
  .new-list-item-content {
    flex-direction: column;
  }
  .new-list-item-img {
    margin-bottom: 10px;
  }
}
</style>